<template>
  <div>
    <div class="banner"></div>
    <div class="contact">
      <ul class="list-nav">
        <li>联系我们</li>
      </ul>
      <div class="list-content">
        <div class="title">
          <p>联系我们</p>
          <Breadcrumb>
            <BreadcrumbItem to="/">首页</BreadcrumbItem>
            <BreadcrumbItem to="job">联系我们</BreadcrumbItem>
          </Breadcrumb>
          <div class="divider"></div>
        </div>
        <div class="content">
          <div class="left">
            <h3 style="color: #333">吉林奥来德光电材料股份有限公司</h3>
            <br />
            地址：长春市高新区硅谷大街5666号红旗大厦19层吉林奥来德<br />
            邮编：130000<br />
            ------------------------------------------------------------------------------------------<br />
            Tel: 83-421-81835771<br />
            Fax：86-431-89836772 <br />Email: saalses@jl-oled.com<br />
            ------------------------------------------------------------------------------------------<br />
          </div>
          <div class="right" id="container"></div>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  methods: {
    initMap() {
      AMapLoader.load({
        key: "4fe0803bf12c91688057b49c0cd9004d", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.ToolBar", "AMap.ControlBar"],
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 17, //初始化地图级别
            center: [125.240091, 43.802034], //初始化地图中心点位置
          });
          var marker = new AMap.Marker({
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position: [125.240091, 43.802034],
          });
          this.map.add(marker);
          this.map.addControl(new AMap.ToolBar({
            position:{ right: '25px', bottom:'20px'},
          }));
          this.map.addControl(new AMap.ControlBar({
            position:'RT',
    
          }));
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
    
<style lang="scss" scoped>
.banner {
  width: var(--width);
  height: 30vh;
  background-image: url("http://www.jl-oled.com/Uploads/Picture/2019-03-27/5c9aef58edc20.jpg");
  background-position: center 0px;
  background-size: cover;
}

.contact {
  margin: 20px auto;
  width: var(--wrap);
  display: flex;
  justify-content: space-between;
  .list-nav {
    li {
      position: relative;
      margin-bottom: 5px;
      padding-left: 10px;
      width: 250px;
      height: 50px;
      line-height: 50px;
      color: #eee;
      background-image: url("http://www.jl-oled.com/Public/Home/images/012.jpg");
      font-size: 16px;
      user-select: none;
      .icon {
        position: absolute;
        right: 20px;
        top: 16px;
      }
    }
  }
  .list-content {
    width: calc(var(--wrap) - 20px - 250px);
    .title {
      position: relative;
      padding-left: 20px;
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #bebdbd;
      display: flex;
      justify-content: space-between;
      p {
        color: #333;
        font-size: 16px;
      }
      .divider {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100px;
        height: 2px;
        background-color: var(--color-zdyblue);
      }
    }
    .content {
      padding: 30px 20px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 100px;
      .left {
        margin-top: 30px;
        h3 {
          font-weight: normal;
          color: #333;
        }
        font-size: 16px;
        color: #767373;
        line-height: 30px;
      }
      #container {
        border: 1px solid #ccc;
        padding: 0px;
        margin: 0px;
        width: 430px;
        height: 290px;
      }
    }
  }
}
</style>
    
    